<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../../statics/mdui/css/mdui.min.css">
		<script type="text/javascript" src="../../statics/common/js/header.js"></script>
		<script src="../../statics/mdui/js/mdui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mdui.init();
		</script>
		<!--标准mdui.css-->
		<style>
			.mdui-content-padded {
				padding: 10px;
			}
			body,
			body .mdui-content {
				background-color: #fff !important;
			}
			#total {
				-webkit-user-select: text;
				text-align: right;
				padding: 0 1em;
				border: 0px;
				border-bottom: 1px solid #007aff;
				border-radius: 0;
				font-size: 16px;
				width: 30%;
				outline: none;
			}
			textarea{
				margin-top: 10px;
			}
			.mdui-btn-block{
				padding: 8px 5px;
			}
		</style>
	</head>

	<body>
		<header class="mdui-bar mdui-bar-nav">
			<a class="mdui-action-back mdui-icon mdui-icon-left-nav mdui-pull-left"></a>
			<h1 class="mdui-title">cloud Pay（云端支付）</h1>
		</header>
		<div id="dcontent" class="mdui-content">
			<div class="mdui-content-padded">
				<p style="text-indent: 22px;">
					这是mdui无后端开发示例，集成BeeCloud云支付服务，通过js连接云端支付服务器，实现支付功能的全流程开发。 如下为一个支付示例，为DCloud提供的免费、开源软件进行捐赠吧
				</p>
				<div style="padding: 0 1em;text-align:center">
					捐赠金额：
					<input id="total" type="number" value="1.0" style="text-align:center" /> 元
				</div>
				<div class="mdui-content-padded oauth-area">
					<!--探测本机软件，自动显示支付宝和微信支付方式-->
					<!--银联在线一直显示-->
					<div id='UN_WEB' class="mdui-btn mdui-btn-blue mdui-btn-block pay">
						银联在线
					</div>
				</div>
				<ul class="mdui-table-view">
					<li class="mdui-table-view-cell">
						支付方式: <span id="channel"></span>
					</li>
					<li class="mdui-table-view-cell">
						订单号: <span id="bill_no"></span>
					</li>
					<li class="mdui-table-view-cell">
						支付金额: <span id="total_fee"></span>
					</li>
					<li class="mdui-table-view-cell">
						支付状态:<span id="status"></span>
					</li>
					<textarea name="" id="status_msg" cols="20" rows="5"></textarea>
				</ul>
			</div>
		</div>
	</body>

</html>